<template>
    <!--地图容器-->
    <div>
    <div id="XSDFXPage" class="XSDFXPage"></div>
<div>fdsafdsfdsfdsfdsa范德萨范德萨发到萨</div>
      <input type="text" v-model="aderss">
      {{vala}}
      <div  @click="fun"> aa</div>
    </div>
</template>
<script>
    export default {
        name:'',
        data () {
            return {
              localSearch:'',
              aderss:'',
              map:'',
              vala:''
            }
        },
        props:['address'],
        mounted() {
           
            // 百度地图API功能
            // 创建Map实例
            this.map = new BMap.Map("XSDFXPage",{enableMapClick:true});
            this.map.centerAndZoom("深圳",12);           
            this.map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
            this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

            this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
            this.map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
            this.map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

            this.localSearch = new BMap.LocalSearch(this.map);
            this.localSearch.enableAutoViewport(); //允许自动调节窗体大小
            
          //this.map.addEventListener("click", this.showInfo);
        },
        methods:{
          showInfo(e){
            alert(e.point.lng + ", " + e.point.lat);
          },
          searchByStationName(val) {
            
            this.map.clearOverlays();//清空原来的标注
            var keyword = this.aderss;
            const _this = this;
            this.localSearch.setSearchCompleteCallback(function (searchResult) {
                
                var poi = searchResult.getPoi(0);
                
                if(!poi){
                  _this.$message.error('无法获取此地址信息')
                  return
                }
                _this.vala = poi.point.lng + "," + poi.point.lat;
                _this.map.centerAndZoom(poi.point, 13);
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
                _this.map.addOverlay(marker);
                var content = _this.aderss + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            });
            _this.localSearch.search(keyword);
          },
          fun(){
            this.searchByStationName()
          }
        }
    }
</script>
<style scoped>
    .XSDFXPage{
            width: 400px;
            height: 500px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
</style>